<template>
    <section>
        <div class="order-container">
            <div class="header">
                <h4>资金流水</h4>
            </div>
            <div class="order-con">
                <el-tabs v-model="activeTab" @tab-click="handleClick" style="">
                    <!--0 日汇总 1 月汇总 -->
                    <el-tab-pane label="日汇总" name="0"></el-tab-pane>
                    <el-tab-pane label="月汇总" name="1"></el-tab-pane>
                </el-tabs>
                <div class="order-con__title">
                    <el-date-picker
                            v-model="time"
                            type="date"
                            style="min-width:150px;"
                            placeholder="选择日期时间">
                    </el-date-picker>
                    <el-button type="primary" @click="searchItem" icon="el-icon-search"></el-button>
                </div>
                <div class="table-box">
                    <el-table :data="reportList" style="width: 100%">
                        <el-table-column :resizable="false" label="结算日期" prop="date">
                        </el-table-column>
                        <el-table-column :resizable="false" label="收入">
                            <template slot-scope="scope">
                                <span class="text-success">{{scope.row.income ? '¥'+scope.row.income : ''}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="支出">
                            <template slot-scope="scope">
                                <span class="text-danger">{{scope.row.spend ? '¥'+scope.row.spend : ''}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="余额" prop="">
                            <template slot-scope="scope">
                                <span>{{scope.row.balance ? '¥'+scope.row.balance : ''}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="操作" prop="operation">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="showItem(scope.row)">查看详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination" v-if="page.total">
                    <div>
                        共{{page.count}}页，每页{{pageSize}}条
                    </div>
                    <el-pagination layout="prev, pager, next" :total="page.total" prev-text="上一页" next-text="下一页"
                                   :page-size="pageSize"
                                   @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                activeTab: '0',
                reportList: [
                    // {date:'2018-01-23',income:208,spend:23,balance:185}
                ],
                tableLoading: false,

                time: '',

                page: {
                    total: null,
                    count: null
                },
                pageSize: 20
            }
        },
        watch: {},
        computed: {},
        mounted() {
            // this.getData();
        },
        methods: {
            genItem(data) {
                axios
                    .get('', {
                        params: data
                    })
                    .then(res => {
                        this.page.total = res.data.count;
                        this.page.count = Math.ceil(res.data.count / this.pageSize)
                        return res;
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('数据', res);
                        this.reportList = res;
                        this.tableLoading = false
                    })
            },
            searchItem() {
                console.log('搜索');
                const data = {
                    pagination: 1,
                    pageSize: this.pageSize,
                    activeTab: this.activeTab,
                    date: this.time,
                };
                this.genItem(data);
            },
            getData() {
                const data = {
                    pagination: 1,
                    pageSize: this.pageSize,
                    activeTab: this.activeTab,
                };
                this.genItem(data);
            },
            handleClick() {
                console.log('处理点击');
                this.tableLoading = true;
                this.getData();
            },
            showItem(row) {
                this.$router.push({name: 'BillSummary', query: {row: row}})
            },
            handleCurrentChange(current) {
                this.getGoodList(current);
            }
        }
    }
</script>
<style scoped>
    .order-container {
        min-height: calc(100vh - 92px);
    }

    .header {
        padding: 10px;

        background: #FFFFFF;
    }

    .order-con {
        margin: 10px;
        padding: 20px;
        background: #FFFFFF;
    }

    .order-con__title {
        padding: 8px 0 20px 0;
        border-bottom: 1px dashed #D8D8D8;
    }

    .table-box {
        min-height: calc(80vh - 92px);
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
    }
</style>
